<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>档案管理系统</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<link rel="stylesheet" href="sheet.css" type="text/css" />
	<script type="text/javascript" src="jquery.js"></script>

	<script type="text/javascript">
		$(function() {
			$.ajaxSetup ({
					cache: false, //关闭AJAX相应的缓存
					beforeSend:function() {
							$("#loading").css("left",(($(window).width()-32)/2)).css("top",(($(window).height()-32)/2));
							$("#loading").fadeIn();
					},
					complete:function() {
							$("#loading").fadeOut();
					}
			});
			var p=1;
			function vi(p){
										$.get("search.asp?page="+p+"&"+$("#search").serialize(),function(data){    //用ajax的get方式提交
														$("#search_main").html(data);
														$(".contable").addClass("ct");  //载入table样式
														$(".contable th").addClass("ch");       //载入th样式
														$(".contable td").addClass("cd");       //载入td样式

														$(".contable tbody tr:odd").addClass("alt");    //对表格主体内单数行进行样式应用

														$(".contable tbody tr").hover(function(){       //对返回的dom进行hover事件捕获
																		$(this).addClass("over");       //添加css样式
														},function(){
																		$(this).removeClass("over");    //移除css样式
														});
														//$(".contable tbody tr").mouseover(function(){ //对返回的dom进行mouseowver事件捕获
														//      $(this).toggleClass("over");    //添加css样式
														//}).mouseout(function(){       //对dom进行mouseout事件捕获
														//      $(this).toggleClass("over");    //移除css样式
														//});

//采用此种方法调试后和上面的直接调用在数量上没区别
//                              $(".contable tbody tr").mouseover(function(e){  //采用event事件方式对返回的dom进行mouseowver事件捕获
//                                      $(e.currentTarget).addClass("over");    //对捕获的事件e的当前对象进行绑定并添加css样式
//                              }).mouseout(function(e){        //采用event事件方式对返回dom进行mouseout事件捕获
//                                      $(e.currentTarget).removeClass("over"); //对捕获的事件e的当前对象进行绑定并移除css样式
//                              });

														$("#pagebar a").click(function(e){      //对分页栏中的a元素进行操作
																		e.preventDefault();     //阻止a的原先事件
																		vi($(this).attr("id")); //根据获取的页码值调用显示页面函数
														});
														$("#page_go").click(function(e){        //对分页栏中的input元素进行操作
																		e.preventDefault();
																		if (isNaN($("#page_val").val())){       //判断输入的是否是数字
																						alert("输入的页码错误，请输入正确页码！");
																						$("#page_val").select();
																						return false;   //页码值不是数字则退出；
																		}
																		vi($("#page_val").val());
														});

														var chk=$(".contable .checkid");
														$("#checkall").click(function(){
																		chk.attr("checked",$(this).attr("checked"));    //根据全选的checkbox状态来填充单个checkbox状态
																		$(this).attr("checked") ? chk.closest("tr").addClass("chk") : chk.closest("tr").removeClass("chk")      //判断是否全部选中，选中则增加chk样式，没选中则删除chk样式，不能用toggleClass方法，由于下面单个checkbox会改变全选的checkbox状态
														});
														chk.click(function(){
																		if(!$(this).attr("checked")) $("#checkall").attr("checked",false);      //如果当前checkbox状态为未选中则全选的checkbox也设置为未选中
																		$(this).closest("tr").toggleClass("chk");       //单个切换当前checkbox存在的tr的chk样式
														});
														
														
														


										});

						}
						$("#ss").click(function(){
								vi(p);
						});
			$("#logout").click(function(){
				$.get("login.asp?logout=logout", function(){
						//window.parent.mainFrame.location.reload();
					window.location.reload();
				});
			});
			$("#add").click(function(){
				window.open("add.asp");
			});
			$("#login").click(function(){
				window.location.href="login.htm";
			});
			$("#tele").click(function(){
				window.location.href="report.asp";
			});
		});
	</script>
</head>
<body>
	<div id="loading"><img src="ajax-loader.gif" /></div>
	<div id="search_bar">
		<form id="search" name="search">
			<label>档案查询</label>
			<input id="sch" name="sch" type="text" />
			<button id="ss" name="ss" type="button">查询</button>
			<button id="add" name="add" type="button">添加档案</button>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="tele" name="tele" type="button">电话费管理系统</button>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="login" name="login" type="button">登录</button>
			<button id="logout" name="logout" type="button">退出</button>
		</form>
	</div>
	<div id="search_main"></div>
</body>
</html>